<!--  -->
<template>
  <div>
    <el-drawer
      title="中压线段台账列表"
      :visible.sync="drawerTable"
      append-to-body
      :close-on-press-escape="false"
      :destroy-on-close="false"
      direction="rtl"
      size="80%"
      class="right-pop-box"
    >
      <div class="btn-head" style="text-align: right;">
        <el-button size="mini" type="primary">导出记录查看</el-button>
        <el-button size="mini" type="primary">导出</el-button>
        <el-button size="mini" type="primary">配置列</el-button>
      </div>
      <el-table 
        :data="gridData" 
        border
        highlight-current-row 
        stripe
        :height="tableHeight"
      >
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    drawerData: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data() {
    return {
      drawerTable: false,
      gridData: [],
      searchRow: {},
      tableHeight: 'calc(100% - 200px)'
    };
  },

  components: {},

  computed: {},

  watch: {
    drawerData(newVal, oldVal){
      this.drawerTable = newVal.drawerTable;
      this.searchRow = newVal.searchRow;
      console.log('this.', this.searchRow)
    }
  },

  created() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },
  
  methods: {
    drawerShow(){
      this.drawerTable = true
    }
  },
};
</script>
<style lang='scss' scoped>
.right-pop-box {
    /deep/ .el-drawer__header { 
      span {
        outline: none;
      }
    }
  }
</style>